﻿<div class="part-r">
	<div class="trade-all trade-form-box">
		 <!--实时成交-->
		 <div class="trade-part-hd" style="height:507px;">
			   <div class="trade-hd">
					 <h6><i class="icon_timetrading"></i>实时成交</h6>
			   </div>
			   <div class="md" id="slide-show">
					 <div class="bd">
					 <table width="100%">
							<thead>
								   <tr>
									  <th>时间</th>
									  <th>类型</th>
									  <th>成交价</th>
									  <th>成交量</th>
								  </tr>
							</thead>
							<tbody id="transaction">
							<volist name="translog" id="vo" empty="$empty">
							<tr><td>{$vo.addtime}</td><td class="buy">{$vo['flag']?'买':'卖'}</td><td class="buy">{$vo.price}</td><td>{$vo.num}</td></tr>
							</volist>
							</tbody>
					 </table>
					 </div>
			   </div>
		 </div>
	</div> 
</div>
<!--左边栏-->
<div class="part-l">
   <!--显示实时行情栏-->
	<div class="btc-rem-all o_h_z">
		 <div class="hangqing-pic"><p>{$goods}</p>实时行情</div>
		 <div class="btc-rem-cont-box p_rel">
		 <div class="dangqianyue-msg-box"><!--提示框-->
			 <i></i>
			 <div class="icon_wen-cont">实时行情：交易期间的即时成交行情</div>
		 </div>
		 <table width="100%">
				 <tbody><tr>
					  <td width="260" height="65">
						   <!--显示实时行情栏-详细-->
						   <div class="btc-rem-cont o_h_z">
								<div class="cur sell" id="BTC_RMB_rate">{$market.now|default=0}</div>
								<div class="arrow-large <eq name='market.flag' value='5'>arrow-fall<else/>arrow-up</eq>" id="price_arrow"></div>
						   </div>
						   <div class="time-box">
								<b id="time">{$market.addtime|default='5'}</b>
						   </div>
					  </td>
					  <td>
						   <div class="f-14-color">最低价</div>
						   <div class="f_73a801 f-shuzhi"><span id="low_price" class="sell">{$market.low|default=0}</span></div>
					  </td>
					  <td>
						   <div class="f-14-color">最高价</div>
						   <div class="f_ff3600 f-shuzhi"><span id="high_price" class="buy">{$market.high|default=0}</span></div>
					  </td>
					  <td>
						   <div class="f-14-color">成交量</div>
						   <div class="f-333 f-shuzhi"><font face="Tahoma"></font><span id="volume">{$market.volume|default=0}</span></div>
					  </td>
				 </tr>   
		 </tbody></table>
		 </div>
	</div>
	<style>
	.mod_market #highcharts-0{ width:704px !important;}
	.mod_market{ width:704px;}
	.mod_market #container22{width: 712px; height: 470px;}
	#chart_area{border:1px solid #ccc;}
	.tabs li{cursor:pointer;}
	</style>
	<div class="mod_market">
	  <div class="m_hd">
		  <ul class="tabs" id="markettabs">
			  <li <eq name="line" value="60">class="cur"</eq> name="60"><i></i><a>1分线</a></li>
			  <li <eq name="line" value="300">class="cur"</eq> name="300"><i></i><a>5分线</a></li>
			  <li <eq name="line" value="900">class="cur"</eq> name="900"><i></i><a>15分线</a></li>
			  <li <eq name="line" value="1800">class="cur"</eq> name="1800"><i></i><a>30分线</a></li>
			  <li <eq name="line" value="3600">class="cur"</eq> name="3600"><i></i><a>1小时线</a></li>
			  <li <eq name="line" value="14400">class="cur"</eq> name="14400"><i></i><a>4小时线</a></li>
			  <li <eq name="line" value="86400">class="cur"</eq> name="86400"><i></i><a>日K线</a></li>
		  </ul>
	  </div>
	  <div class="m_bd">
		  <div id="chart_area"></div>
	  </div>
	  <script type="text/javascript">
		$(document).ready(function(){
			$('#markettabs li').click(function(){
				$('#realtime').load('/?s=Home/Index/chart/line/'+$(this).attr('name')+'/id/{$id}/goods/{$goods}/coin/{$coin}');
                var sc = null;
                clearInterval(sc);
				var line = $(this).attr('name');
				var goods = "{$goods}";
				var coin = "{$coin}";
				sc = setInterval(function(){
				    $('#realtime').load('/?s=Home/Index/chart/line/'+line+'/id/{$id}/goods/'+goods+'/coin/'+coin);
				},360000);
			});
		});
	  </script>
	</div>
</div>
<script src="/Public/js/jquery.js"></script>
<script src="/Public/js/highstock.src.js"></script>
<script>
 $(document).ready(function(){
   var datas ={$chart} , rates = [], vols = [];
   for(i = 0; i < datas.length; i++){
     rates.push([datas[i][0], parseFloat(datas[i][2],10), parseFloat(datas[i][3],10), parseFloat(datas[i][4],10), parseFloat(datas[i][5],10)]);
     vols.push([datas[i][0], parseFloat(datas[i][1],10)]);
   }

   Highcharts.setOptions({
     lang: {
       loading: 'Loading...',
       months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
       shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
       weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
       decimalPoint: '.',
       numericSymbols: ['k', 'M', 'G', 'T', 'P', 'E'],
       resetZoom: 'Reset zoom',
       resetZoomTitle: 'Reset zoom level 1:1',
       thousandsSep: ','
     },
     credits: {enabled: false},
     global:{useUTC:false},
   });

   new Highcharts.StockChart({
     chart: { renderTo: 'chart_area'},
     xAxis: { type: 'datetime' },
     legend: { enabled: false },
     tooltip: { xDateFormat: '%Y-%m-%d %H:%M %A', changeDecimals: 4 },
     scrollbar: {enabled: false},
     navigator: {enabled: false},
     rangeSelector:{enabled: false},
	 plotOptions: { candlestick: {color: '#f01717',upColor: '#0ab92b'},column: {color: '#4572A7'}},
     yAxis: [
       { top:0,left:35,width:650,height:270, title: { text: '价格 [{$coin}]' }},
       { top:270,height:100,title: { text: '成交量 [{$goods}]' },min:0,max:{$volmax},opposite: false }
     ],
     series: [
       { animation: false, name: '成交量 [{$goods}]', type: 'column', marker: { enabled: false }, yAxis: 1, data: vols },
       { animation: false, name: '价格 [{$coin}]', type: 'candlestick', marker: { enabled: false }, data: rates }
     ]
   });
 });
</script>